<template>
	<view>
		<view class="head">服务费发票开取</view>
		<view class="content">
			<view class="title">发票类型</view>
			<radio-group @change="chan" class="radio">
				<label v-for="item in radioGroup" :key="item" class="select">
					<radio :value="item" :checked="item == activeRadio" />
					{{ item }}
				</label>
			</radio-group>
			<view class="particulars">
				<view class="invoiceTitl">
					发票抬头
					<input type="text" value="" placeholder="请输入公司名称" @input="invoiceTitl" />
				</view>
				<view class="invoiceNumber">
					发票税号
					<input type="text" maxlength="18" value="" :placeholder="holder" @input="invoiceNumber" />
				</view>
				<view class="email">
					电子邮箱
					<input type="email" value="" placeholder="用于接收电子发票" @input="email" />
				</view>
			</view>
		</view>
		<view class="hint">温馨提示:</view>
		<view class="without">如果开取非企业性质发票，不需要填写税号</view>
		<view class="invoice" @click="invoice">开取发票</view>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			activeRadio: '', //存的是选中的value值
			radioGroup: ['企业单位', '个人/非企业'],
			invoiceTitle: '',
			invoicenumber: '',
			emailAddress: '',
			orderCode: '',
			holder: '请输入税号'
		};
	},
	onLoad(options) {
		const that = this;
		that.orderCode = options.code;
	},
	methods: {
		chan(e) {
			this.activeRadio = e.detail.value;
			if (this.activeRadio == '个人/非企业') {
				this.holder = '不需要填写税号';
			} else {
				this.holder = '请输入税号';
			}
		},
		invoiceTitl(e) {
			this.invoiceTitle = e.detail.value;
		},
		invoiceNumber(e) {
			this.invoicenumber = e.detail.value;
		},
		email(e) {
			this.emailAddress = e.detail.value;
		},
		getInvoice() {
			let data = {
				title: this.invoiceTitle,
				taxNum: this.invoicenumber,
				email: this.emailAddress,
				orderCode: this.orderCode,
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			data.sign = utils.utils.GetSign(data);
			this.$http
				.request({
					url: '/Order/ApplyInvoice',
					method: 'POST',
					data: data
				})
				.then(res => {
					if (res.data.result == true) {
						uni.showModal({
							title: '发票开取成功',
							content: '稍后我们会向您的邮箱中发放一份电子发票，请注意查收！',
							showCancel: false,
							confirmText: '确定',
							success: function(res) {
								uni.navigateBack({});
							}
						});
					} else {
						uni.showModal({
							title: '请求失败',
							content: res.data.msg,
							showCancel: false,
							confirmText: '确定',
							success: function(res) {}
						});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		invoice() {
			if (this.holder == '请输入税号') {
				if (this.invoiceTitle == '' || this.invoicenumber == '' || this.emailAddress == '') {
					uni.showToast({
						icon: 'none',
						title: '请把内容填写完整',
						duration: 2000
					});
				} else {
					var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
					if (!verify.test(this.emailAddress)) {
						uni.showModal({
							title: '提示',
							content: '邮箱格式不正确',
							showCancel: false,
							confirmText: '确定',
							success: function(res) {}
						});
						return false;
					} else {
						this.getInvoice();
					}
				}
			} else {
				if (this.invoiceTitle == '' || this.emailAddress == '') {
					uni.showToast({
						icon: 'none',
						title: '请把内容填写完整',
						duration: 2000
					});
				} else {
					var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
					if (!verify.test(this.emailAddress)) {
						uni.showModal({
							title: '提示',
							content: '邮箱格式不正确',
							showCancel: false,
							confirmText: '确定',
							success: function(res) {}
						});
						return false;
					} else {
						this.getInvoice();
					}
				}
			}
		}
	}
};
</script>

<style scoped>
.head {
	height: 80upx;
	color: #666666;
	line-height: 80upx;
	padding-left: 15upx;
	background-color: #eeeeee;
}
.content {
	width: 95%;
	margin: auto;
	padding-left: 20upx;
	background-color: #f8f8f8;
}
.title {
	padding-top: 40upx;
}
.select {
	padding-left: 70upx;
}
.radio {
	padding-top: 50upx;
}
.particulars {
	margin-top: 30upx;
	border-top: 1upx solid #e1e1e1;
	border-bottom: 1upx solid #e1e1e1;
}
.particulars view {
	display: flex;
	height: 110upx;
	line-height: 110upx;
}
.particulars input {
	width: 72%;
	padding-top: 30upx;
	padding-left: 30upx;
}
.invoiceNumber {
	border-top: 1upx solid #e1e1e1;
	border-bottom: 1upx solid #e1e1e1;
}
.hint {
	color: #666666;
	font-size: 30upx;
	margin-top: 130upx;
	padding-left: 20upx;
}
.without {
	color: #a6a6a6;
	font-size: 30upx;
	padding-left: 20upx;
}
.invoice {
	width: 90%;
	margin: auto;
	color: #ffffff;
	height: 100upx;
	font-size: 40upx;
	margin-top: 80upx;
	text-align: center;
	line-height: 100upx;
	border-radius: 10upx;
	background-color: #01a1ea;
}
</style>
